<script setup lang="ts">
import type { ConditionField, IConditionGroup } from '@/components/Form/ConditionBuilder/typing'
import { PageWrapper } from '@/components/Application'
import ConditionBuilder from '@/components/Form/ConditionBuilder/index.vue'
import { NDatePicker, NInput, NSelect } from 'naive-ui'
import { ref } from 'vue'

const fields: ConditionField[] = [
  {
    key: 'sex',
    label: '性别',
    component: NSelect,
    options: [
      { label: '男', value: 1 },
      { label: '女', value: 2 },
    ],
    placeholder: '请选择性别',
    clearable: true,
    props: (value) => {
      return {
        multiple: value.operator === 'contains',
      }
    },
  },
  {
    key: 'age',
    label: '年龄',
    component: NInput,
    type: 'number',
    min: 0,
    max: 120,
    placeholder: '请输入年龄',
  },
  {
    key: 'birthday',
    label: '生日',
    component: NDatePicker,
    type: 'date',
    placeholder: '请选择日期',
  },
]

const conditionData = ref<IConditionGroup>()

const builder = ref<InstanceType<typeof ConditionBuilder>>()
function validate() {
  const res = builder.value?.validate()
  console.log(res)
  console.log('validate success')
}
</script>

<template>
  <PageWrapper preset="card">
    <h2 @click="validate">
      条件构造器 DEMO
    </h2>
    <ConditionBuilder ref="builder" v-model:value="conditionData" :fields="fields" class="demo-condition" />
    <h3 style="margin-top: 24px;">
      当前条件数据：
    </h3>
    <pre>{{ conditionData }}</pre>
  </PageWrapper>
</template>

<style scoped>
.demo-condition {
  /* --bg-color: red !important; */
}
</style>
